<template>
<div>
  <ul>
    <li>{{title}}</li>
    <li>首页</li>
    <li>登录</li>
    <li>个人中心</li>
    <button @click="changeMsg">清除信息</button>
  </ul>
</div>
</template>


<script>
export default {
  name: "NavBar",
  // 可以声明，能被父组件传递的数据
  props:{
    // 可以当作属性来用，和data一样，在js中也可以通过this.title获取它，但是有一点，这个属性不能修改，因为是从父级传过来的
    title:{
      default:"天亮教育",
      type:String
    }
  },
  methods:{
    changeMsg(){
      console.log("执行这个子组件的关键逻辑")
      // 可以给父组件发消息
      this.$emit("lalalala","子组件要发送的消息")
      this.$emit("dididi","嘀嘀嘀")
    }
  }
}
</script>

<style scoped>
ul{
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

ul li {
  padding: 20px;
}
</style>
